CSS maintenance: flex-basis property #34233
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
Content:CSS
|
Preview URLs (comment last updated: 2024-06-24 17:59:15) |
|
This pull request has merge conflicts that must be resolved before it can be merged. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
|
||
|  |
There was a problem hiding this comment.
Does this image need to be deleted too?
chrisdavidmills
approved these changes
Jun 24, 2024
There was a problem hiding this comment.
@estelle nice work, as always. I've only got some relatively minor comments, so I'm approving.
|
|
||
| {{EmbedInteractiveExample("pages/css/flex-basis.html")}} | ||
|
|
||
| In this example, the {{cssxref("flex-grow")}} and {{cssxref("flex-shrink")}} properties are both set to `1` on all three items, indicating that the flex item can grow and shrink from the initial `flex-basis`. | ||
|
|
||
| The demo then changes the `flex-basis` on the first item. It will then grow and shrink from that flex-basis. This means that, for example, when the `flex-basis` of the first item is `200px`, it will start out at 200px but then shrink to fit the space available with the other items being at least `min-content` sized. | ||
| > [!NOTE] |
There was a problem hiding this comment.
Feels to me like this note should go below all the demo explanations, just above the "Syntax" heading. As it is, it kind of chops the explanation in half, which feels a bit weird.
|
|
||
| The image below shows how the Firefox [Flexbox Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html) helps you understand the size items become: | ||
| The demo then changes the `flex-basis` on the first item. It will then grow and shrink from that flex-basis. This means that, for example, when the `flex-basis` of the first item is `200px`, it will start out at `200px` but then shrink to fit the space available with the other items being at least `min-content` sized. |
There was a problem hiding this comment.
Suggested change
| The demo then changes the `flex-basis` on the first item. It will then grow and shrink from that flex-basis. This means that, for example, when the `flex-basis` of the first item is `200px`, it will start out at `200px` but then shrink to fit the space available with the other items being at least `min-content` sized. | |
| The demo changes the `flex-basis` value set on the first flex item, causing it to grow or shrink to fill the available space. The other flex items will also change size; they will be at least `min-content`-sized. For example, when the `flex-basis` of the first item is set to `200px`, it will start at `200px` but then shrink to fit the space available. |
|
|
||
|  |
|  | ||
|
|
||
| > **Note:** In case both `flex-basis` (other than `auto`) and `width` (or `height` in case of `flex-direction: column`) are set for an element, `flex-basis` has priority. | ||
| In `flex-basis` is set to a value other than `auto` and there is a `width` (or `height` in case of `flex-direction: column`) set for that same flex item, the `flex-basis` value takes precedence. |
There was a problem hiding this comment.
Suggested change
| In `flex-basis` is set to a value other than `auto` and there is a `width` (or `height` in case of `flex-direction: column`) set for that same flex item, the `flex-basis` value takes precedence. | |
| If `flex-basis` is set to a value other than `auto` and there is a `width` (or `height` in case of `flex-direction: column`) set for that same flex item, the `flex-basis` value takes precedence. |
| - `max-content` sets the intrinsic preferred width | ||
| - `min-content` sets the intrinsic minimum width | ||
| - `fit-content` sets the maximum possible size of a containing block's content area, bounded by the `min-content` and `max-content` values, and calculated based on the content of the current element | ||
| - {{cssxref("<percentage>")}} sets a percentage of the width or height of the containing block's content area |
There was a problem hiding this comment.
The bullets all read nicely, but do they need full stops at the end of them? Only a minor nit.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
remove history - content has been supported for a while in its final form.
add links to internal pages
removed image as it didn't really help clarify the concept
updated see also links to current writing guidelines
added some see also links